<template>
    <div class="tablist">
        <serach></serach> <!--顶部搜索栏-->
        <div class="tebfixed">
            <van-tabs
                class="tabs"
                v-model="activeName"
                sticky
                title-active-color="#fe4070"
                lazy-render
                animated
                :swipeable="true"
                @click="mitmsg"
            > <!--tabbar-->
                <van-tab v-for="item in tabList" :title="item.name" :to="item.path" :key="item.id">
                    <router-view></router-view> <!--tabbar内容-->
                </van-tab>
            </van-tabs>
        </div> <!--tabbar-->
    </div>
</template>
<script>
import serach from './Serach'
import {mapGetters} from "vuex";
export default {
    data () {
        return {
            tabList: [
                {path:'/home/homedata',name:'首页',id:'01'},
                {path:'/home/global',name:'极速免税店',id:'02'},
                {path:'/home/muandbady',name:'母婴',id:'03'},
                {path:'/home/luxury',name:'轻奢',id:'04'},
                {path:'/home/pop',name:'名品特卖',id:'05'},
            ],
            activeName: 0,
        }
    },
    methods: {
        mitmsg (name, title) { // tabs 点击事件默认传 name和title
            this.$emit('getmsg',title)
        }
    },
    computed:{
        ...mapGetters('cart', ['getAmount'])
    },
    components: {
        serach,
    },
    created() {
        console.log(this.$route.fullPath)
        this.tabList.forEach((item, index) => {
            if (item.path === this.$route.fullPath ) this.activeName = index
        })
    },
    watch:{
        activeName(val){
            console.log(val,'activeName')
            localStorage.setItem('homeTab', val)
        }
    },
    destroyed() {
        this.activeName = '/home/homedata'
    }
}
</script>
<style lang="scss" scoped>
.tebfixed{
    // width: 100%;
    height: 44px;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .swiper-slide{
        text-align: center;
        span{
            display: inline-block;
            font-size: 14px;
            line-height: 44px;
            color: #666;
            // vertical-align: middle;
        }
        .active{
            color: #fe4070;
            border-bottom: 2px solid #fe4070;
        }
    }
}
</style>
